// 1.默认导入material风格的组件库
import 'package:flutter/material.dart';

class MyApp16 extends StatelessWidget {
  const MyApp16({super.key});

  List<Widget> getChildren() {
    return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((int value) {
      return Container(
        alignment: Alignment.center,
        color: Colors.teal,
        child: Text(
          '第$value个',
          style: const TextStyle(color: Colors.white, fontSize: 30),
        ),
      );
    }).toList();
  }

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    // 3.创建一个MaterialApp组件（指定应用整体的UI风格：material风格）
    return Scaffold(
        // 1.1 导航
        appBar: AppBar(
          title: const Text('GridView组件'),
          backgroundColor: Colors.pink,
        ),
        // 1.2 主体内容
        body: Padding(
          padding: const EdgeInsets.all(10),
          child: GridView(
            // 1 代理1
            // SliverGridDelegateWithFixedCrossAxisCount 创建一个固定宽高的GridView，一行的数据是固定的
            // gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            //     // 1.1 列数
            //     crossAxisCount: 3,
            //     // 1.2 列宽，列间距
            //     crossAxisSpacing: 10,
            //     // 1.3 行高，行间距
            //     mainAxisSpacing: 10,
            //     // 1.4 宽高比
            //     childAspectRatio: 1.5),
            // 2 代理2
            gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                // 2.1 宽高比
                childAspectRatio: 1.5,
                // 2.2 最大宽度
                maxCrossAxisExtent: 100,
                // 2.4 行间距
                mainAxisSpacing: 10,
                // 2.3 列间距
                crossAxisSpacing: 10),
            children: getChildren(),
          ),
        ));
  }
}
